<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="page_list">
      <div class="listBOx" v-if="playerList.length">
        <div class="list" v-for="(item, index) in playerList" :key="index">
          <div class="list_num">{{ index + 1 }}</div>
          <div class="list_write">
            <!-- <img class="bianji" src="../../assets/image/bianji.png" alt=""> -->
          </div>
          <div class="list_img">
            <img class="img" :src="item.photo" alt="" />
          </div>
          <div class="list_intro">
            <div class="list_name">{{ item.name }}</div>
            <div class="list_number">年龄:{{ item.age }}岁</div>
            <div class="list_number">证件号 {{ item.identity_number }}</div>
          </div>

          <div class="list_option">
            <van-checkbox v-model="item.in_team"></van-checkbox>
            <!-- <div class="choose" :class="{ isIcon: getUnionStatus(item) }">
              <img
                class="choose_img isIcon"
                v-if="item.in_team == 1"
                src="../../assets/image/checked_icon01.png"
                alt=""
              />
            </div> -->
            <!-- <div class="deleteBtn">删除</div> -->
          </div>
        </div>
        <div style="height: 2.8rem"></div>
      </div>
      <div class="listEmpty" v-else>
        <div class="emptyBox">
          <img
            class="empty_img"
            src="../../assets/image/empty_icon01.png"
            alt=""
          />
          <div class="empty_title">暂无球员</div>
        </div>
      </div>
    </div>
    <div class="page_bottom">
      <div class="createBtn" @click="goBackList()">确认添加</div>
      <div class="addBtn" @click="goAddForm()">新增队员</div>
    </div>
  </div>
</template>

<style src="../../assets/css/game/addMember.css" scoped></style>

<script>
import HomeTop from "@/components/homeTop.vue";
import { Checklist } from "mint-ui";
import { Toast, Indicator } from "mint-ui";
import { Checkbox, CheckboxGroup } from "vant";
export default {
  name: "addPlayers",
  components: {
    HomeTop,
    Checklist,
    [Checkbox.name]: Checkbox,
  },
  data() {
    return {
      topTitle: "添加队员", // 顶部组件参数设置
      playerList: [], //球员列表
      team_id: "", //队伍id
      inputKey: true, //是否输入
    };
  },
  created() {
    this.team_id = sessionStorage.getItem("teamid");
    // console.log(this.team_id, "record_id");
    this.getMemberList();
  },
  methods: {
    //跳转到新增队员页面
    goAddForm() {
      this.$router.push({
        name: "addMemberDetails",
      });
    },
    //返回到队伍列表页面
    goBackList() {
      let arr = this.playerList.filter((item) => item.in_team == 1);
      let player_ids = arr.map((e) => {
        return e.id;
      });
      if (!player_ids.length) {
        Toast({
          message: "请选择队员",
          duration: 3000,
        });
      } else {
        let url = "/mobile/addManyPlayerToTeam";
        let data = {
          team_id: this.team_id,
          player_ids: player_ids,
        };
        Indicator.open();
        this.axios
          .post(url, data)
          .then((res) => {
            Indicator.close();
            if (res.code == 0) {
              // console.log(res, "res");

              this.$router.replace({
                name: "teamMassage",
              });
            } else {
              Toast({
                message: res.msg,
                duration: 3000,
              });
            }
          })
          .catch(function (error) {
            Indicator.close();
            console.log(error);
          });
      }
    },
    //获取球员列表
    getMemberList() {
      let url = "/mobile/playerList";
      let data = {
        team_id: this.team_id,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((res) => {
          Indicator.close();
          if (res.code == 0) {
            this.playerList = res.player;
            console.log(this.playerList);
            //in_team为1 则为选中 为2 为未选中
            this.playerList.map((item) => {
              if (item.in_team == 1) {
                item.in_team = true;
              } else {
                item.in_team = false;
              }
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
  },
};
</script>
